<template>
  <div v-if="visible">
    <FormRelationDetailTabs
      :viewId.sync="viewId"
      :actionId.sync="actionId"
      :form-definition="formDefinition"
      :list-views-configs="listViewsConfigs"/>
    <div class="form-relation-manual-detail-wrapper">
      <FormEngine
        :form-model="formModel" :form-definition="formDefinition"
        :view="viewId" :action="actionId"/>
    </div>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {getAction} from '@api/manage';
import FormEngine from '@comp/hhd/design/FormEngine/FormEngine.vue';
import {createFormDefinition, readFormDefinitionVo} from '@comp/hhd/design/FormDesigner/types';
import FormRelationDetailTabs from '@comp/hhd/design/FormRelationManualDetailView/FormRelationDetailTabs.vue';

export default {
  name: 'FormRelationManualDetailView',
  components: {FormRelationDetailTabs, FormEngine},
  props: {
    formDefinitionId: createProps(String, undefined),
    dataId: createProps(String, undefined),
    relationId: createProps(String, undefined),
    manualId: createProps(String, undefined),
    manual: createProps(Object, () => ({})),
  },
  data() {
    return {
      formDefinition: createProps(Object, createFormDefinition),
      relation: undefined,
      formModel: {},
      visible: false,
      viewId: undefined,
      actionId: undefined,
      listViewsConfigs: [],
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.loadFormDefinition(() => {
        this.getRelationAndManual(() => {
          this.listViewsConfigs = this.manual.listViewsConfigs;
          this.visible = true;
        });
      });
    },
    getActionAndView() {
      if (this.listViewsConfigs && this.listViewsConfigs.length) {
        let item = this.listViewsConfigs[0];
        this.actionId = item.actionId;
        this.viewId = item.viewId;
      }
    },
    getRelationAndManual(callback) {
      // let relations = this.formDefinition.relations || [];
      // this.relation = relations.find(item => item.id === this.relationId);
      // let manuals = this.relation && this.relation.manuals || [];
      // this.manual = manuals.find(item => item.id === this.manualId);

      this.loadFormDataById(callback);
    },
    loadFormDataById(callback) {
      this.loading = true;
      getAction('/form/loadFormData', {
        formDefinitionId: this.formDefinitionId,
        id: this.dataId,
      }).then(data => {
        if (data.success) {
          this.formModel = data.result;
          callback && callback();
        } else {
          this.$notification.error({message: data.message, duration: 3});
        }
        this.loading = false;
      }).catch(error => {
        console.log(error);
        this.loading = false;
        this.$notification.error({message: error, duration: 3});
      });
    },
    loadFormDefinition(callback) {
      this.loading = true;
      getAction('/form/queryById', {id: this.formDefinitionId}).then(data => {
        if (data.success) {
          this.formDefinition = readFormDefinitionVo(data.result);
          callback && callback();
        } else {
          this.$notification.error({message: data.message, duration: 3});
        }
        this.loading = false;
      }).catch(error => {
        console.log(error);
        this.loading = false;
        this.$notification.error({message: error, duration: 3});
      });
    },
  }
};
</script>
<style>
.form-relation-manual-detail-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>